<template>
  <div>
    <div class="qup-title-box"><span class="border" /><span>专项检查</span></div>
    <table-box
      ref="refTable"
      table-size="mini"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      show-index
      no-request
      :table-height="200"
      :other-filters="otherFilters"
      @btnOperate="btnOperate"
      @selection-change="selectionChangeHandle"
    />
    <!-- 新增/编辑 -->
    <el-dialog
      width="700px"
      :title="formData.id?'编辑':'新增'"
      :visible.sync="showDlg"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" label-width="110px" size="mini" :model="formData" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item :rules="[{ required:true, message: '请选择', trigger: 'change' }]" label="专项主题" prop="theme">
              <el-input v-model="formData.theme" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :rules="[{ required:true, message: '请选择', trigger: 'change' }]" label="专项内容" prop="content">
              <el-input v-model="formData.content" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showDlg = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>
    <div class="qup-title-box"><span class="border" /><span>走访附件</span></div>
    <c-file-table-box
      v-model="files"
      title="上传附件"
      :editable="!isDetail"
      :table-height="250"
      type-code="ACCESS109"
      belong-model="SHOP_INTERVIEW"
      :model-id="patrolId"
    />
    <NodeList />
    <div v-if="!isDetail||pageType==='2'">
      <div class="qup-title-box"><span class="border" /><span>意见信息</span></div>
      <el-form label-width="120px">
        <el-row v-if="pageType==='2'">
          <el-col>
            <el-form-item label="审核结果" prop="resultCode">
              <el-select
                v-model="editForm.resultCode"
                placeholder="审核结果"
                style="width:100%"
              >
                <el-option label="同意" :value="1" />
                <el-option label="不同意" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="意见备注" prop="remark">
              <el-input v-model="editForm.remark" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <div style="color:#999;text-align:center;margin-bottom:60px">没有更多了</div>

  </div>
</template>
<script>
import { formaterData } from '@/utils'
import { getDictByPatchType } from '@/api/dataDict'
import NodeList from '../../decorateInspection/components/NodeList.vue'
import { deleteSpecialItem, saveSpecialItem, queryNodeList } from '@/api/marketService/dailyPatrol'
export default {
  name: 'SpecialItem',
  components: { NodeList },
  props: {
    patrolId: {
      type: String,
      default: ''
    },
    shopCode: {
      type: String,
      default: ''
    },
    picConfigId: {
      type: String,
      default: ''
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formaterData,
      showDlg: false,
      pageType: '',
      tableData: [],
      stepList: [],
      files: [],
      editForm: { id: null, remark: '', resultCode: 1 },
      formData: {
        content: '',
        id: null,
        patrolId: '',
        theme: ''
      },
      rules: {},
      tableSelected: [],
      otherFilters: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/patrolSpecial/page`,
        apiHeader: { },
        hideSearchBar: true,
        // pageSize: 20,
        // sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'theme',
            label: '专项主题',
            minWidth: 100
          },
          {
            prop: 'content',
            label: '专项内容',
            minWidth: 100
          }
        ],
        btnList: [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          },
          {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          },
          {
            buttonName: '删除',
            optCode: 'delete',
            outerFlag: true
          }
        ]
      }
    }
  },
  watch: {
    patrolId: {
      handler(v) {
        if (!v) return
        this.refreshTable()
        this.handleQueryNodeList()
      },
      deep: true,
      immediate: true
    }
  },
  async created() {
    if (this.isDetail) {
      this.tableConfig.btnList = []
    }
    const { type } = this.$route.query
    this.pageType = type
    await getDictByPatchType(['DAILY_STATUS']).then(res => {
      this.stepList = res.DAILY_STATUS
    })
  },
  methods: {
    handleQueryNodeList() {
      queryNodeList(this.patrolId).then(res => {
        if (res.success) {
          this.tableData = res.data.records
        }
      })
    },
    getData() {
      return { editForm: this.editForm, files: this.files.map(v => v.response.data) }
    },
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'delete':
          this.handleDelete()
          break
        default:
          break
      }
    },
    handleDelete() {
      if (!this.singleJudge(this.tableSelected, '删除', true)) {
        return
      }
      deleteSpecialItem(this.tableSelected[0].id).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.refreshTable()
        }
      })
    },
    closeDlg(done) {
      this.showDlg = false
      this.$refs.editForm && this.$refs.editForm.clearValidate()
      done && done()
      this.formData = {}
    },
    handleSave() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          saveSpecialItem(this.formData).then(res => {
            if (res.success) {
              this.$message.success('保存成功')
              this.closeDlg()
              this.refreshTable()
            }
          })
        }
      })
    },
    handleEdit(row) {
      if (row && row.id) {
        const { content, id, patrolId, theme } = row
        this.formData = { content, id, patrolId, theme }
      }
      this.$set(this.formData, 'patrolId', this.patrolId)
      this.showDlg = true
    },
    // 刷新表格
    refreshTable(v = 'onPage') {
      this.otherFilters = [{ 'property': 'patrolId', 'value': this.patrolId, 'operator': '=', 'id': 'patrolId' }]
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(v)
      })
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
